<template>
	<view class="appealList">
		<nav-bars class="i_top" bgColor="#fff" fontColor="#000" backState="1000">
			<view class="i_tCan" slot="default">
				<view class="i_tInput">
					<view class="i_tIcon iconfont icon-search"></view>
					<input type="text" confirm-type="search" v-model="keyword" @confirm="searchData" placeholder="搜索订单信息"
						placeholder-class="placeholder" />
				</view>
			</view>
		</nav-bars>
		<view class="nar-bar">
			<view class="tabs">
				<u-tabs
				name="cate_name" 
				count="cate_count" 
				:list="list" 
				:is-scroll="false" 
				:current="current" 
				@change="change"
				bg-color="rgba(0,0,0,0)"
				active-color="#333" 
				inactive-color="#606266"
				bar-width="60"></u-tabs>
			</view>	
		</view>
		<view class="content">
			<view class="item" v-for="(item,index) in appealList" :key="index">
				<view class="topInfo">
					<view class="top">
						<view class="left">
							{{item.partner_name}}
							<text class="iconfont icon-jinru"></text>
						</view>
						<view class="tag">
							<text class="active" v-if="item.is_platform==1">平台介入</text>
							<text>{{appealStatus[item.status]}}</text>
						</view>
					</view>
					<view class="bottom">
						订单编号：{{item.order_no}}
					</view>
				</view>
				<view class="centerInfo">
					 <view class="infoItem">
					 	<text>申诉类型：</text>
						{{item.appeal_type}}
					 </view>
					 <view class="infoItem">
					 	<text>备注内容：</text>
						<view class="desc">
							{{item.appeal_desc}}
						</view>
					 </view>
				</view>
				<view class="btnBox">
					<view class="btn" @click="toTelPhone(item.client_phone)">联系客户</view>
					<view class="btn" @click="toViewDetail(item.id,item.order_id)">查看详情</view>
					<view v-if="item.status==0" class="btn" @click="handleBtn(item.id)">处理</view>
				</view>
			</view>
			<u-popup v-model="show" mode="center" border-radius="20">
				<view class="popHandle">
					<view class="tit">申诉处理方案</view>
					<view class="textBox">
						<textarea value="" v-model="handle_scheme" maxlength="1000" placeholder="请输入处理方案" />
					</view>
					<view class="btn" @click="handleSubmit">确定</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import service_appeal from '@/service/appeal.js'
	export default{
		data(){
			return{
				list: [
					{
						cate_name: '待处理',
					},{
						cate_name: '处理中',
					},{
						cate_name: '已解决',
					},{
						cate_name: '已关闭',
					},{
						cate_name: '平台介入',
					},
				],
				appealStatus:{
					0:'待处理',
					1:'处理中',
					2:'已解决',
					3:'已关闭',
				},
				current:0,
				keyword:'',
				page:1,
				pagesize:10,
				appealList:[],
				appealType:'',//builder-施工申诉单，design-设计申诉单
				show:false,
				handle_scheme:'',//处理方案
				appealId:''
			}
		},
		onLoad(options) {
			console.log(options,'options')
			this.appealType = options.appealType
		},
		onShow() {
			if(this.appealType=='design'){
				this.getAppealDesignList()
			}else{
				this.getAppealBuildList()
			}
		},
		onReachBottom() {
			if(this.appealType=='design'){
				this.getAppealDesignList('onReach')
			}else{
				this.getAppealBuildList('onReach')
			}
		},
		methods:{
			// 切换tabs 
			change(index){
				this.current = index;
				if(this.appealType=='design'){
					this.getAppealDesignList()
				}else{
					this.getAppealBuildList()
				}
			},
			
			// 获取设计申诉订单
			getAppealDesignList(type){
				if(type=='onReach'){
					this.page++
				}else{
					this.page=1
				}
				let role = this.$store.state.index.role
				let sid = this.$store.state.index.sid
				uni.showLoading({title:'加载中'})
				let params = {
					designer_id:role=='decoration'?'':sid,
					decoration_id:role=='decoration'?sid:'',
					keyword:this.keyword,
					status:this.current==4?'':this.current,
					is_platform:this.current==4?1:'',
					page:this.page,
					pagesize:this.pagesize
				}
				service_appeal.getAppealDesignList(params).then(res=>{
					console.log(res,'设计申诉单列表')
					if(res.code==1){
						if(type=='onReach'){ //上拉加载更多
							this.appealList = this.appealList.concat(res.data)
						}else{
							this.appealList = res.data?res.data:[]
						}
					}
				})
				uni.hideLoading()
			},
			
			// 获取施工申诉订单
			getAppealBuildList(type){
				if(type=='onReach'){
					this.page++
				}else{
					this.page=1
				}
				let role = this.$store.state.index.role
				let sid = this.$store.state.index.sid
				uni.showLoading({title:'加载中'})
				let params = {
					team_id:role=='decoration'?'':sid,
					decoration_id:role=='decoration'?sid:'',
					keyword:this.keyword,
					status:this.current==4?'':this.current,
					is_platform:this.current==4?1:'',
					page:this.page,
					pagesize:this.pagesize
				}
				service_appeal.getAppealBuildList(params).then(res=>{
					console.log(res,'施工申诉单列表')
					if(res.code==1){
						if(type=='onReach'){//上拉加载更多
							this.appealList = this.appealList.concat(res.data)
						}else{
							this.appealList = res.data?res.data:[]
						}
					}
				})
				uni.hideLoading()
			},
			
			// 处理按钮
			handleBtn(id){
				this.show = true
				this.appealId = id
			},
			
			// 处理 弹出层确定
			handleSubmit(){
				let that = this
				if(this.handle_scheme==''){
					uni.showToast({title:'请输入处理方案',icon:'none'})
					return
				}
				let params = {
					id:this.appealId,
					handle_scheme:this.handle_scheme
				}
				if(this.appealType=='design'){ //设计单
					service_appeal.handleAppealDesign(params).then(res=>{
						console.log(res,'处理结果')
						if(res.code==1){
							uni.showToast({
								title:'处理成功',
								icon:'success'
							})
							setTimeout(function(){
								that.show = false
								that.getAppealDesignList()
							},300)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				}else{ //施工单
					service_appeal.handleAppealBuild(params).then(res=>{
						console.log(res,'处理结果')
						if(res.code==1){
							uni.showToast({
								title:'处理成功',
								icon:'success'
							})
							setTimeout(function(){
								that.show = false
								that.getAppealBuildList()
							},300)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				}
			},
			
			// 电话按钮
			toTelPhone(phone){
				console.log(180*3)
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: phone, 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			
			// 点击查看详情
			toViewDetail(id,order_id){
				let role = this.$store.state.index.role
				if(this.appealType=='design'){
					if(role=='decoration'){ //装企设计单
						uni.navigateTo({
							url:`/pages_decoration/home/order/accomplish?appeal_id=${id}&id=${order_id}`
						})
					}else{ //设计单
						uni.navigateTo({
							url:`/pageTwo/home/order/accomplish?appeal_id=${id}&id=${order_id}`
						})
					}
				}else{
					if(role=='decoration'){
						uni.navigateTo({ //装企施工单
							url:`/pages_decoration/home/buildOrder/accomplish?appeal_id=${id}&id=${order_id}`
						})
					}else{ //施工单
						uni.navigateTo({
							url:`/pagesOne/constr/home/order/accomplish?appeal_id=${id}&id=${order_id}`
						})
					}
					
				}
			}
		}
	}
</script>

<style lang="scss">
	.appealList{
		// 顶部搜索框=====
		.i_top {
			position: relative;
			z-index: 999;
			background: #fff;
			.i_tCan {
				width: 100%;
				height: 66rpx;
				// padding-left: 32rpx;
				padding-right: 24rpx;
				/* #ifndef APP-PLUS-NVUE */
				// margin-left: 34rpx;
				width: 500rpx;
				/* #endif */
				flex: 1;
				/*#ifdef H5 || MP-WEIXIN*/
				width: 400rpx;
				/*#endif*/
			}
		
			.i_tBg {
				width: 100vw;
				height: 500rpx;
				background: linear-gradient(135deg, #2e333f 0%, #191d29 100%);
				position: fixed;
				top: 0;
				left: 0;
			}
		
			.i_tInput {
				height: 66rpx;
				border-radius: 34rpx;
				background: #F6F7FB;
				position: relative;
				opacity: .8;
		
				&>input {
					width: 100%;
					height: 100%;
					font-size: 24rpx;
					padding-left: 72rpx;
				}
			}
		
			.i_tIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				color: #6c6c6c;
				font-size: 32rpx;
				position: absolute;
				top: 18rpx;
				left: 32rpx;
			}
		}
		.nar-bar{
			z-index: 1;
			height: 80rpx;
			width: 100%;
			position: fixed;
			left: 0;
			background: #fff;
			.icon-fanhui{
				color: #333;
				font-size: 38rpx;
				margin-right: 35rpx;
			}
			.search-box {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 0 28rpx;
				padding-top: 50rpx;
			}
			.search{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 422rpx;
				height: 66rpx;
				border: 1px solid #FFFFFF;
				opacity: 0.5;
				// background: rgba(52,58,66,.5);
				border-radius: 34rpx;
				input{
					width: 82%;
					height: 100%;
					color: #FFFFFF;
				}
				.icon-sousuo{
					color: #FFFFFF;
					margin-left: 28rpx;
					
				}
			}
			.tabs{
				width: 100%;
				// margin-top: 55rpx;
			}
		}
		
		.content{
			padding-top: 80rpx;
			.item{
				width: 702rpx;
				margin: 24rpx auto;
				background-color: #fff;
				padding: 29rpx 24rpx 42rpx 24rpx;
				border-radius: 16rpx;
				.topInfo{
					.top{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.left{
							display: flex;
							align-items: center;
							font: bold 28rpx/28rpx PingFang SC;
							color: #333333;
							.iconfont{
								font-size: 24rpx;
							}
						}
						.tag{
							text{
								padding: 6rpx 9rpx;
								border-radius: 4rpx;
								font: 500 24rpx/24rpx PingFang SC;
								color: #fff;
								background-color: #E7AD14;
								margin-left: 12rpx;
							}
							.active{
								background-color: #EB5F58;
							}
						}
					}
					.bottom{
						margin-top: 17rpx;
						font: 500 22rpx/22rpx PingFang SC;
						color: #A0A0A0;
					}
				}
				.centerInfo{
					background-color: #F5F5F5;
					border-radius: 8rpx;
					padding:20rpx 30rpx;
					margin: 28rpx 0 40rpx 0;
					.infoItem{
						display: flex;
						font: 500 22rpx/45rpx PingFang SC;
						color: #333333;
						text{
							line-height: 45rpx;
							flex-shrink: 0;
						}
						.desc{
							color: #A0A0A0;
						}
					}
				}
				.btnBox{
					display: flex;
					justify-content: flex-end;
					.btn{
						padding: 16rpx 26rpx;
						border-radius: 28rpx;
						border: 2rpx solid #505050;
						font: 500 26rpx/26rpx PingFang SC;
						color: #505050;
						text-align: center;
						margin-left: 20rpx;
					}
				}
			}
		}
		
		// 处理方案弹出层
		.popHandle{
			padding: 24rpx;
			.tit{
				font: bold 30rpx/60rpx PingFang SC;
			}
			.textBox{
				height: 300rpx;
				border-radius: 10rpx;
				background-color: #f5f5f5;
				margin-top: 10rpx;
				textarea{
					height: 300rpx;
					padding: 20rpx;
				}
			}
			.btn{
				width: 50%;
				height: 80rpx;
				border-radius: 16rpx;
				background-color: #BDA36F;
				text-align: center;
				margin: 30rpx auto;
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
			}
		}
	}
</style>
